<template>
  <div class="wrap" ref="wrap">
    <div class="moudle-title">大唐哈一热电厂{{ tableTitle }}份综合计划</div>
    <div class="content-list">
      <table class="content-table" :style="styleObject">
        <tr class="content-title">
          <td>主要指标</td>
          <td>单位</td>
          <td>月度确保值</td>
          <td>月度争取值</td>
          <td>截止上月累计完成</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.indexName }}</td>
          <td>{{ item.indexUnit }}</td>
          <td class="content-year">{{ item.planVal }}</td>
          <td class="content-year">{{ item.strivingVal }}</td>
          <td class="content-year">{{ item.accuVal }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import sppApi from '@/api/spp'
import { ElMessage, dayjs } from 'element-plus'

export default {
  name: 'SppRightTop',
  emits: ['onResize'],
  data() {
    return {
      tableData: [],
      tableTitle: '',
      oHeight: 1,
      divStyle: {
        width: '100%',
        height: '100%'
      },
      styleObject: {}
    }
  },
  mounted() {
    this.initData()
    this.oHeight = this.$el.querySelector('.content-table').clientHeight
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
      this.$nextTick(() => {
        const container = this.$refs.wrap
        if (container) {
          this.divStyle.width = container.clientWidth
          this.divStyle.height = container.clientHeight
          this.oHeight = this.$el.querySelector('.content-table').clientHeight
          let scale = (container.clientHeight - 50) / this.oHeight
          this.styleObject = {
            transform: `scale(1,${scale}) translate(0, ${(-100 * (1 - scale)) / 1.5}%)`,
            WebkitTransform: `scale(1,${scale}) translate(0, ${(-100 * (1 - scale)) / 1.5}%)`
          }
        }
      })
    },
    initData() {
      this.tableTitle = dayjs().add(-1, 'day').format('YYYY年MM月')
      sppApi.getMonthcompplan().then((res) => {
        if (res.code === 200) {
          this.tableData = res.data
          if (res.data && res.data.length > 0) {
            this.tableTitle = res.data[0].planMonth.replace('-', '年') + '月'
          }
          this.onResize()
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.wrap {
  height: 100%;
  padding: 10px 0 0 0;
}
.moudle-title {
  color: #50e9ff;
  font-size: 12px;
  text-align: center;
}

.content-table {
  margin: 0 10px;
  text-align: center;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  th,
  tr,
  td {
    height: 30px;
    border: 1px solid #147dcf;
    text-align: center;
    font-size: 12px;
  }
}

.content-title {
  font-weight: bold;
  td {
    padding: 5px 0;
  }
}

.content-month {
  color: crimson;
  padding: 7px 0;
}

.content-year {
  color: gold;
}

.content-list {
  padding: 0 20px 0 10px;
  color: chartreuse;
  font-size: 12px;
  margin-top: 10px;
}

.dynamic-div {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
